<template>
	<view class="page_head">

		<view class="Land_item_head">
			<view class="item_order">
				<view class="item_top_order">
					<view class="item_top_number">
						订单编号：{{date.order_no}}
					</view>
					<view class="item_top_type">
						
								{{date.status_code == 0?'订单未付款'
								:date.status_code == 1?'订单待成熟'
								:date.status_code == 2?'已成熟待收取'
								:date.status_code == 3?'待后台确认自采预约'
								:date.status_code == 4?'等待自采中'
								:date.status_code == 5?'自采中'
								:date.status_code == 6?'农场采摘中'
								:date.status_code == 7?'已收取待入库'
								:date.status_code == 8?'已入库待保管'
								:date.status_code == 9?'保管中':'订单已完成'}}
					</view>
				</view>
				<view class="item_goods" v-for="(item,index) in date.goods_list" :key="index">
					<image class="item_goods_img" :src="item.goods_pic"></image>
					<view class="item_goods_info">
						<view class="item_goods_title">
							{{item.name}}
						</view>
						<view class="item_goods_price_head">
							<view class="item_goods_content">
								<text v-for="(da,i) in it.attr_list"
									:key="i">{{da.attr_group_name}}:{{da.attr_name}},</text>
							</view>
							<view class="item_goods_num">
								×{{item.num}}
							</view>
						</view>
						<view class="item_goods_price">
							￥{{date.pay_price}}
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="Land_item_head">
			<view class="msg_head">
				<view class="msg_title">
					订单编号:
				</view>
				<view class="msg_content">
					{{date.order_no}}
				</view>
				<view class="msg_botton" @click="get_copy(date.order_no)">
					复制
				</view>
			</view>
			<view class="msg_head">
				<view class="msg_title">
					下单时间:
				</view>
				<view class="msg_content">
					{{date.addtime}}
				</view>
			</view>
			<view class="msg_head">
				<view class="msg_title">
					支付方式:
				</view>
				<view class="msg_content">
					{{payTypeWord?payTypeWord:""}}
				</view>
			</view>
			<view class="msg_heads">
				<view class="msg_title">
					商品总额:
				</view>
				<view class="msg_contents">
					￥{{date.pay_price}}
				</view>
			</view>
			<view class="msg_heads">
				<view class="msg_title">
					运费:
				</view>
				<view class="msg_contents">
					￥0.00
				</view>
			</view>
			<view class="msg_price">
				实付款：<text>￥{{date.pay_price}}</text>
			</view>
		</view>
		<view class="Land_item_head">
			<view class="Land_item_title_head">
				<view class="Land_item_title">种植信息</view>
				<!-- <view class="Land_item_msg">剩余7/12</view> -->
			</view>
			<view class="select_bottom_head">
				<view class="select_bottom_item">
					<image src="../static/images/land/cat.png" mode=""></image>
					<view class="select_bottom_item_title">
						品种
					</view>
					<view class="select_bottom_item_content">
						{{date.goods_list[0].varieties}}
					</view>
				</view>
				<view class="select_bottom_item">
					<image src="../static/images/land/time.png" mode=""></image>
					<view class="select_bottom_item_title">
						生长周期
					</view>
					<view class="select_bottom_item_content">
						{{date.goods_list[0].growth_cycle}}天
					</view>
				</view>
				<view class="select_bottom_items">
					<image src="../static/images/land/shouyi.png" mode=""></image>
					<view class="select_bottom_item_title">
						产量
					</view>
					<view class="select_bottom_item_content">
						{{date.goods_list[0].yield}}
					</view>
				</view>
			</view>
		</view>
		<view class="Land_item_head">
			<view class="Land_item_title_head">
				<view class="Land_item_title">种植信息</view>
				<!-- <view class="Land_item_msg">剩余7/12</view> -->
			</view>
			<view class="list_item_head" v-for="(item,index) in date.growth_status" :key="index">
				<image :src="date.goods_list[0].goods_pic" mode=""></image>
				<view class="list_item_info">
					<view class="list_item_title">
						{{item.name}}
					</view>
					<view class="list_item_time">
						{{item.time}}
					</view>
					<view class="list_item_conten">
						{{item.desc}}
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_head" v-if="date.is_mature == 1 && date.pick_method == 0 && false">
			<view class="bottom_heads">
				<!-- view class="bottom_content">
					已成熟<text>5</text>天
				</view> -->
				<view class="bottom_button">
					<view class="bottom_button2" @click="get_button1()">
						自采带走
					</view>
					<view class="bottom_button2" @click="get_button3()">
						自采入库
					</view>
					<view class="bottom_button2" @click="get_button2()">
						农场代采
					</view>
				</view>
			</view>
		</view>
		<!-- 自采带走 -->
		<view class="button1_mode" v-if="mode_type1 == true" @click="get_button1()">
			<view class="button1_infos" @click.stop="get_null()">
				<view class="button1_title">
					订单提示
				</view>
				<view class="button1_content">
					您认养的商品已成熟，确定选择自己收取并带走吗？
				</view>
				<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in date.goods_list[0].self_pick_date" :key="index">
							{{item}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in  date.goods_list[0].self_pick_times" :key="index">
							{{item.start_time}}-{{item.end_time}}
						</view>
					</picker-view-column>
				</picker-view>
				<view class="button1_button">
					<view class="but1" @click="get_button1()">
						取消
					</view>
					<view class="but2" @click="get_pick(1)">
						确定
					</view>
				</view>
			</view>
		</view>
		<!-- 成熟提示弹窗 -->
		<view class="button1_mode" v-if="mode_type2 == true" @click="get_button2()">
			<view class="button1_info" @click.stop="get_null()">
				<view class="button1_title">
					订单提示
				</view>
				<view class="button1_content">
					您认养的商品已成熟，确定选择农场收取吗？
				</view>
				<view class="button1_button">
					<view class="but1" @click="get_button2()">
						取消
					</view>
					<view class="but2" @click="get_pick(2)">
						确定
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import adopt_order from "@/api/livestockAdoption/adopt_order.js";
	export default {
		data() {
			return {
				mode_type1: false,
				mode_type2: false,
				mode_type3: false,
				order_id: 0,
				date: {},
				visible: true,
				indicatorStyle: `height: 50px;`,
				book_self_pick_date:'',
				book_self_pick_time:''
			};
		},
		onLoad(t) {
			this.order_id = t.order_id;
		},
		onShow() {
			this.get_order_detail();
		},
		computed: {
		  //   0:微信，2:货到付款，3:余额，4:支付宝
		  payTypeWord() {
		    const Pay_Trans = {
		      1: this.$t("common.payMethod1"),
		      2: this.$t("common.payMethod2"),
		      3: this.$t("common.payMethod3"),
		      4: this.$t("common.payMethod4"),
		    };
		    return Pay_Trans[this.date.pay_type] || null;
		  },
		},
		methods: {
			bindChange: function(e) {
				var self_pick_date = this.date.goods_list[0].self_pick_date;
				var self_pick_times = this.date.goods_list[0].self_pick_times;
				this.book_self_pick_date = self_pick_date[e.detail.value[0]]
				this.book_self_pick_time = self_pick_times[e.detail.value[1]].start_time +'-'+ self_pick_times[e.detail.value[1]].end_time
			},
			//采摘
			async get_pick(type){
			
				var obj={
					date:this.date,
					order_type:0
				}
		
				try {
					
					if(type == 1){
						var params = {
							order_id: this.date.order_id,
							pick_type: type,
							book_self_pick_date:this.book_self_pick_date,
							book_self_pick_time:this.book_self_pick_time 
						};
						 const res = await  adopt_order.pick(params);
						 				
						 if (res.code == 0) {
						 
						 	this.mode_type1 = false;
							uni.showToast({
								title: res.msg,
								icon: 'none',
								 duration: 2000
							})
							
						 }else {
							 uni.showToast({
							 	title: res.msg,
							 	icon: 'none',
							 	 duration: 2000
							 })
						 }
					}else{
						// var params = {
						// 	order_id: this.date.order_id,
						// 	pick_type: type
						// };
						
					
						this.mode_type2 = false;
						uni.navigateTo({
							url:'../adopt_pay/adopt_pay?obj='+JSON.stringify(obj)
						})
					}
				
				} catch (e) {
				}
			},
			//复制
			get_copy(data){
					   uni.setClipboardData({
					     data: data,
					     success() {
					       uni.showToast({
					         title: '复制成功',
					         icon: "none",
					         duration: 2000,
					       });
					     },
					   });
			},
			//订单详情
			async get_order_detail() {
				try {
					var params = {
						order_id: this.order_id
					};
					const res = await  adopt_order.order_detail(params);
					if (res.code == 0) {
						this.date = res.data;
					}
				} catch (e) {
				}
			},
			get_button2() {
				this.mode_type2 = !this.mode_type2;
			},
			get_button1() {
				this.mode_type1 = !this.mode_type1;
				var self_pick_date = this.date.goods_list[0].self_pick_date;
				var self_pick_times = this.date.goods_list[0].self_pick_times;
				this.book_self_pick_date = self_pick_date[0];
				this.book_self_pick_time = self_pick_times[0].start_time +'-'+ self_pick_times[0].end_time
			},
			get_button3() {
				this.mode_type3 = !this.mode_type3;
				var self_pick_date = this.date.goods_list[0].self_pick_date;
				var self_pick_times = this.date.goods_list[0].self_pick_times;
				this.book_self_pick_date = self_pick_date[0];
				this.book_self_pick_time = self_pick_times[0].start_time +'-'+ self_pick_times[0].end_time
			},
			// 防止点击穿透
			get_null() {

			}
		},
	};
</script>

<style scoped>
	.picker-view {
		/* width: 100%; */
		height: 300rpx;
		margin-top: 20rpx;
	}
	
	.item {
		height: 100rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 100rpx;
	}
	.button1_infos {
		width: 90%;
		border-radius: 25rpx;
		background: #FFFFFF;
	}
	
	.but2 {
		padding: 10rpx 60rpx;
		color: #FFFFFF;
		border-radius: 90rpx;
		background-image: linear-gradient(rgb(85, 177, 85), rgb(111, 215, 72));
	}

	.but1 {
		padding: 10rpx 60rpx;
		border: 1rpx solid #a5a5a5;
		color: #a5a5a5;
		border-radius: 90rpx;
	}

	.button1_button {
		width: 90%;
		margin: 50rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.button1_content {
		width: 90%;
		margin: 30rpx auto;
		color: #909090;
		font-size: 25rpx;
	}

	.button1_title {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000000;
	}

	.button1_info {
		width: 70%;
		border-radius: 25rpx;
		background: #FFFFFF;
	}

	.button1_mode {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgb(0, 0, 0, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom_button2 {
		padding: 10rpx 15rpx;
		border: 1rpx solid rgb(251, 189, 77);
		color: rgb(251, 189, 77);
		margin-right: 20rpx;
		border-radius: 90rpx;
	}

	.bottom_button {
		display: flex;
		align-items: center;
	}

	.bottom_button1 {
		padding: 10rpx 15rpx;
		border: 1rpx solid #a5a5a5;
		color: #a5a5a5;
		margin-right: 20rpx;
		border-radius: 90rpx;
	}

	.bottom_content text {
		color: rgb(239, 22, 0);
	}

	.bottom_content {
		color: #828282;
		font-size: 25rpx;
	}

	.bottom_heads {
		width: 95%;
		height: 100%;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bottom_head {
		width: 100%;
		height: 80rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.list_item_conten {
		color: #8f8f8f;
		display: flex;
		align-items: flex-end;
	}

	.list_item_title {
		color: #000000;
		font-weight: 600;
	}

	.list_item_time {
		display: flex;
		align-items: center;
		font-size: 20rpx;
		color: #8f8f8f;
	}

	.list_item_info view {
		flex: 1;
	}

	.list_item_info {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		height: 100%;
		width: 85%;
	}

	.list_item_head image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 25rpx;
	}

	.list_item_head {
		width: 95%;
		/* height: 120rpx; */
		margin: 20rpx auto;
		display: flex;
		align-items: center;
	}

	.msg_price text {
		color: rgb(240, 35, 12);
		font-size: 30rpx;
		font-weight: 600;
	}

	.msg_price {
		width: 95%;
		height: 80rpx;
		text-align: end;
		color: #818181;
		margin: auto;
	}

	.msg_contents {
		color: #000000;
	}

	.msg_heads {
		width: 95%;
		height: 80rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.msg_botton {
		font-size: 20rpx;
		padding: 5rpx 10rpx;
		background: rgb(242, 242, 242);
		color: #000000;
		margin-left: 40rpx;
		border-radius: 90rpx;
	}

	.msg_content {
		color: #000000;
		margin-left: 25rpx;
	}

	.msg_title {
		color: #676767;
	}

	.msg_head {
		width: 95%;
		height: 80rpx;
		margin: auto;
		display: flex;
		align-items: center;
	}

	.item_goods_num_price {
		width: 95%;
		/* height: 80rpx; */
		margin: 0 auto;
		text-align: end;
		/* line-height: 80rpx; */
		color: #555555;

	}

	.item_goods_price {
		color: #000000;
		font-weight: 600;
	}

	.item_goods_price_head {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 50rpx;
	}

	.item_goods_content {
		color: #888888;
		font-size: 25rpx;
	}

	.item_goods_title {
		color: #000000;
	}

	.item_goods_info {
		width: calc(100% - 200rpx);
		margin-left: 20rpx;
	}

	.item_goods_img {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;

	}

	.item_goods {
		width: 95%;
		margin: auto;
		display: flex;
		align-items: center;
	}

	.item_top_type {
		color: rgb(241, 48, 26);
		font-size: 25rpx;
	}

	.item_top_number {
		color: #000000;
		font-weight: 600;
	}

	.item_top_order {
		width: 95%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: auto;
	}

	.item_order {
		width: 100%;
		background: #FFFFFF;
		margin: 20rpx auto;

	}

	.select_bottom_items image {
		width: 50rpx;
		height: 50rpx;
	}

	.select_bottom_item image {
		width: 50rpx;
		height: 50rpx;
		padding-bottom: 10rpx;
	}

	.select_bottom_item_content {
		color: #868686;
		margin-top: 15rpx;
	}

	.select_bottom_item_title {
		color: #000000;
	}

	.select_bottom_items {
		width: 33.3%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.select_bottom_item {
		width: 33.3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-right: 1rpx solid #e2e2e2;
	}

	.select_bottom_head {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.Land_item_title {
		color: #000000;
	}

	.Land_item_title_head {
		width: 90%;
		height: 100rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.Land_item_head {
		width: 100%;
		background: #FFFFFF;
		margin-top: 30rpx;
	}

	.page_head {
		width: 100%;
		min-height: 100vh;
		background: #f1f1f1;
		padding-bottom: 100rpx;

	}
</style>
